<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="c1" width="600" height="400"></canvas>

    <script>
        /** @type {HTMLCanvasElement} */
        // 画布
        let c1 = document.getElementById("c1")
        // 画笔
        let ctx = c1.getContext("2d")
        // 大小 字体
        ctx.font = "100px Microsoft YaHei"
        // 对齐方式
        ctx.textAlign = "left"
        ctx.textBaseline = "top"
        // 文本方向
        ctx.direction = "rtl"
        // 文本位置信息 上下左右距离
        console.log(ctx.measureText("hello")) 
        // 第4个参数：最大宽度
        ctx.fillText("hello!", 300, 200, 100)

        ctx.strokeText("测试", 400, 200, 100)

        ctx.arc(280, 200, 5, 0, 2 * Math.PI)
        ctx.fill()

    </script>
</body>

</html>